import React from 'react';
import {connect} from 'react-redux';
import { openPage, changePageState, changeMapState, changeSelectedSpot, searched, clearSearched, submit} from '../../actions/actions';
import {Toast, Modal} from 'antd-mobile';
import Map from '../../components/Map/Map';
import SearchBox from '../../components/SearchBox/SearchBox';
import UserIcon from '../../components/UserIcon/UserIcon';
import ReservationIcon from '../../components/ReservationIcon/ReservationIcon';
import CancelIcon from '../../components/CancelIcon/CancelIcon';
import ReservationStateButton from '../../components/ReservationStateButton/ReservationStateButton';

const alert = Modal.alert;

class Home extends React.Component {
    state = {
        selectedPark: {
            name: '',
            price: 0,
            distance: 0
        }
    }

    componentDidMount() {
        this.props.openPage({
            isOpen: true
        });
    }

    componentDidUpdate() {
        switch (this.props.mapInfo.state) {
            case 'reserved':
                alert('选择车位', '', [
                    {text: '否', onPress: () => this.props.changeMapState('selected_spot')},
                    {text: '是', onPress: () => this.props.changeMapState('selecting_spot')},
                ]);
                break;
            case 'selected_spot':
                if (this.props.mapInfo.selecedSpot) success();
                break;
            case 'navigated':
                this.props.changeMapState('indoor_navigating');
                break;
            default:
                break;
        }

        if (this.props.mapInfo.searched) {
            this.props.searched(false)
        }
        if (this.props.mapInfo.clearSearched) {
            this.props.clearSearched(false)
        }
    }

    // 点击停车场图标，若地图为normal状态，跳转显示信息，地图变为selected状态
    clickMapIcon(selectedPark) {
        if (!selectedPark && this.props.mapInfo.state === 'selected') {
            this.props.changeMapState('normal');
        }
        else if (selectedPark && this.props.mapInfo.state === 'normal') {
            this.props.changeMapState('selected');
            this.setState({selectedPark})
        }
        else if (selectedPark && this.props.mapInfo.state === 'selected') {
            this.setState({selectedPark})
        }
    }

    navigateEnd() {
        this.props.changeMapState('navigated');
    }

    selectedSpot() {
        this.props.changeMapState('selected_spot');
    }

    // normal状态，点击进入预定页面；
    // selected状态，执行预定，地图变为reserved状态
    // reserved状态，预定成功，地图变为selecting_spot状态
    // selecting_spot状态，选择车位 
    // selected_spot状态，车位选择完毕，地图变为navigating状态
    // navigating状态，不执行任何操作
    // navigated状态，导航结束
    // indoor_navigating 室内导航
    // indoor_navigated 室内导航结束
    clickReservationStateButton() {
        switch (this.props.mapInfo.state) {
            case 'normal':
                this.props.clickReservationIcon();
                break;
            case 'selected':
                this.props.submit(this.state.selectedPark)
                this.props.changeMapState('reserved');
                success();
                break;
            case 'selected_spot':
                this.props.changeMapState('navigating');
                break;
            default:
                break;
        }
    }

    search() {
        this.props.searched(true)
    }

    clearSearch() {
        this.props.clearSearched(true)
    }

    // 恢复初始状态
    cancel() {
        this.props.clearSearched(true);
        this.props.changeMapState('normal');
        this.refs.map.clear();
    }

    render() {
        return (
            <div>
                <Map
                    mapState={this.props.mapInfo.state}
                    selectedSpot={this.props.mapInfo.selecedSpot}
                    selectedPark={this.state.selectedPark.name}
                    clickMapIcon={this.clickMapIcon.bind(this)}
                    searched={this.props.mapInfo.searched}
                    clearSearched={this.props.mapInfo.clearSearched}
                    changeMapState={this.props.changeMapState.bind(this)}
                    changeSelectedSpot={this.props.changeSelectedSpot.bind(this)}
                    ref="map"
                />
                <SearchBox search={this.search.bind(this)} clearSearch={this.clearSearch.bind(this)}/>
                <UserIcon click={this.props.clickUserCenterIcon}/>
                <ReservationIcon click={this.props.clickReservationIcon} />
                <CancelIcon click={this.cancel.bind(this)} />
                <ReservationStateButton
                    mapState={this.props.mapInfo.state}
                    click={this.clickReservationStateButton.bind(this)}
                />
            </div>
        )
    }
}

const mapStateToProps = (state, ownProps = {}) => {
    return Object.assign({}, ownProps, {
        userInfo: state.userInfo,
        mapInfo: state.mapInfo,
    })
}

const mapDispatchToProps = (dispatch) => {
    return {
        openPage: (data) => {
            dispatch(openPage(data));
        },
        clickReservationIcon: () => {
            dispatch(changePageState({
                show: 'reservation'
            }));
        },
        clickUserCenterIcon: () => {
            dispatch(changePageState({
                show: 'user-center'
            }));
        },
        changeMapState: (state) => {
            dispatch(changeMapState({
                state: state
            }));
        },
        changeSelectedSpot: (selecedSpot) => {
            dispatch(changeSelectedSpot({
                selecedSpot: selecedSpot
            }))
        },
        searched: (data) => {
            Toast.loading('搜索中...', 1, () => {
                console.log('搜索成功!');
            });
            dispatch(searched({
                searched: data
            }));
        },
        clearSearched: (data) => {
            dispatch(clearSearched({
                clearSearched: data
            }));
        },
        submit: (data) => {
            dispatch(submit({
                reservation: data
            }));
        }

    }
}

function success() {
    Toast.success('选择成功!', 1);
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Home);
